<template>
 <div class="box">
      <div class="header">
         <van-nav-bar
        title="我的"
      >
           <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            placement="bottom-end"
            theme="dark"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="#000" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      </div>
      <div class="main">

  <div class="title" v-if="isFlag">
  
    <img src="//m.360buyimg.com/mobilecms/s750x750_jfs/t1/87776/33/5985/722748/5df096b4E7b0e72bf/697e54f5f7cb37bd.jpg!q80.dpg" alt="">
    <div><p>{{name}}</p>
    <span>{{tel}}</span></div>
    </div>
    <div class="title1" v-else>
      <img src="" alt="">

      <p>请先登录</p>
      <button @click="$router.push('/login')">登录</button>
    </div>

  
   

  <div class="list">
    <ul>
      <li><van-icon name="chat-o" /> 服务</li>
      <li ><van-icon name="star-o" /> 收藏</li>
      <li><van-icon name="shop-o" /> 关注</li>
      <li><van-icon name="service" /> 售后</li>
      <li><van-icon name="todo-list-o" /> 订单</li>
      
      <li><van-icon name="question" />  其他</li>

    </ul>
  </div>
        
      </div>
    </div>
</template>

<script>
import { doInfo } from "../api/user";
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  name: 'My',
  components: {
  },
  data () {
    return {
      actions: [
        { text: "首页", icon: "wap-home-o"},
        { text: "退出登录", icon: "share-o"},
        { text: "设置", icon: "setting-o"},
        
      ],
      showPopover: false,
     name:"",
     tel:""
      
    }
  },
  methods: {
    onSelect(action, index) {
      switch (index) {
       case 0:
         this.$router.push("/home")
         break;
       
   case 1:
        localStorage.removeItem("token")
        localStorage.removeItem("userid")
        this.$router.push("/home")
          break;
           case 2:
          this.showPopover=true
          this.$router.push("/mypassword")
          break;
        default:
          break;
      }
  }

},
computed: {
  isFlag(){
    if(localStorage.getItem("token")){
      return true
    }else{
      return false
    }
  }
},
created () {
   doInfo({userid:localStorage.getItem("userid")}).then((data)=>{
   console.log(data.data.data[0])
    this.name=data.data.data[0].nickname
    this.tel=data.data.data[0].tel.slice(0,3)+'****'+data.data.data[0].tel.slice(7)
  })
}
}
</script>
<style scoped>
.title,.title1{
  margin: 18px auto;
  display: flex;
}
.title1 p{
  padding: .2rem 0;
}
.title1{
  justify-content: space-around;
  align-items: center;

}
.title1 button{
  border: none;
  background:coral;
  height: .4rem;
  width: .8rem;
  line-height: .4rem;
  text-align: center;
  color: #fff;
}

.title img{
  height: .5rem;
  border-radius: 50%;
}
.title p{
  font-weight: bold;
  font-size: .2rem;
  margin: 0 20px ;
  margin-bottom: .1rem;
}
.title span{
  padding: .2rem;
 
}
.list ul{
  margin: .2rem auto;
}
.list ul li{
  height: .4rem;
  width: 100%;
  padding: .1rem;
  margin: .1rem 0;
  background: #fff;
  font-size: .2rem;
  color: coral;
}

</style>